<template>
  <div>
    <div class="jifen_tit">我的积分：{{ points }}</div>
    <van-row class="jifen_level">
      <van-col span="8">等级</van-col>
      <van-col span="8">标志</van-col>
      <van-col span="8">积分</van-col>
    </van-row>
    <van-row
      v-for="(item, index) in newList"
      :key="index"
      class="jifen_level color"
      :class="{ 'color-red': item.pointColor }"
    >
      <van-col span="8">{{ item.level }}</van-col>
      <van-col span="8">{{ item.levelSign }}</van-col>
      <van-col span="8">{{ item.pointsNum }}</van-col>
    </van-row>
  </div>
</template>

<script>
import { Toast } from "vant";
import Vue from "vue";
import { Col, Row } from "vant";
export default {
  name: "myrC",
  data() {
    return {
      points: "402",
      newList: [],
      pointsLevel: [
        {
          level: 1,
          levelSign: "v1",
          pointsNum: "0 - 100",
          pointColor: false,
        },
        {
          level: 2,
          levelSign: "v2",
          pointsNum: "101 - 200",
          pointColor: false,
        },
        {
          level: 3,
          levelSign: "v3",
          pointsNum: "201 - 300",
          pointColor: false,
        },
        {
          level: 4,
          levelSign: "v4",
          pointsNum: "301 - 400",
          pointColor: false,
        },
        {
          level: 5,
          levelSign: "v5",
          pointsNum: "401 - 500",
          pointColor: false,
        },
        {
          level: 6,
          levelSign: "v6",
          pointsNum: "501 - 600",
          pointColor: false,
        },
        {
          level: 7,
          levelSign: "v7",
          pointsNum: "601 - 700",
          pointColor: false,
        },
        {
          level: 8,
          levelSign: "v8",
          pointsNum: "701 - 800",
          pointColor: false,
        },
        {
          level: 9,
          levelSign: "v9",
          pointsNum: "801 - 900",
          pointColor: false,
        },
        {
          level: 10,
          levelSign: "v10",
          pointsNum: "901 - 1000",
          pointColor: false,
        },
      ],
    };
  },
  mounted() {
    this.newList = this.pointsLevel;
    this.myLevel();
  },
  methods: {
    myLevel() {
      let mylevel = parseInt(this.points / 100);
      for (let i = 0; i < this.pointsLevel.length; i++) {
        if (this.pointsLevel[i].level == mylevel + 1) {
          console.log(mylevel + 1);
          this.pointsLevel[i].pointColor = true;
        }
      }
    },
  },
};
</script>

<style scoped>
.jifen_tit {
  color: rgb(43, 40, 40);
  padding: 0 16px;
  text-align: center;
  font-size: 400;
}
.jifen_level {
  color: rgb(43, 40, 40);
  text-align: center;
  padding: 10px 16px 10px 16px;
}
.color {
  color: rgb(31, 29, 29);
}
.color.color-red {
  color: rgb(235, 55, 55);
}
</style>